* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-1: #11303a;
    --color-2: rgba(255, 255, 255, .75);
    --color-3: rgba(255, 255, 255, .5);
    --color-4: #215b6e;
    --color-5: #ffffff;
    --p-1: 10px;
}

body {
    font: normal 16px 'Microsoft YaHei', '微软雅黑';
    background: url(./bg.jpg) no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    background-color: var(--color-1);
    color: var(--color-1);
}

#login-box {
    max-width: 520px;
    background-color: var(--color-3);
    backdrop-filter: blur(7.5px);
    margin: 7em auto 0;
    border-radius: var(--p-1);
    border: 1px solid var(--color-2);
    padding: 3em 2em;

    ::selection {
        color: var(--color-1);
        background-color: var(--color-2);
    }

    .form-box {
        display: flex;
        flex-direction: column;
        align-items: center;

        button,
        input {
            font-size: 100%
        }

        #title {
            font-size: 2.5em;
            font-weight: bold;
            margin-bottom: .75em;
            text-shadow: 0 0 5px var(--color-3);
        }

        .input-box {
            position: relative;
            width: 100%;
            height: 3.5em;
            margin-bottom: 1.5em;
            border-bottom: 2px solid var(--color-1);

            label,
            .login-icon {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }

            label {
                color: var(--color-1);
                font-size: 1em;
                font-weight: bold;
                opacity: .5;
                left: 0;
                transition: all .35s;
            }

            .label-top {
                opacity: .35;
                top: -10px;
                transform: translateX(-5px) scale(.85);
            }

            .login-icon {
                right: 5px;
            }

            input {
                background-color: transparent;
                border: none;
                outline: 0;
                height: 100%;
                width: 100%;
                color: var(--color-1);
                font-size: 1.25em;
                font-weight: bold;
            }
        }

        .btn-submit {
            border: none;
            display: block;
            margin-top: .75em;
            width: 100%;
            padding: .9em 0;
            border-radius: 5px;
            font-weight: bold;
            font-size: 1.25em;
            color: var(--color-2);
            background-color: var(--color-1);
            transition: all .35s;

            &:hover {
                color: var(--color-5);
                background-color: var(--color-4);
            }

            &:active {
                transform: scale(.95);
            }
        }
    }
}